<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-for="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>表单输入绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
<div id="app">

    <input type="text" v-model="message"><br>
    {{message}}<br><hr>
    <textarea cols="30" rows="10" v-model="textarea"></textarea><br>
    <div>{{textarea}}</div>
    <!--<div style="white-space: pre-line">{{textarea}}</div>  换行？-->
    <hr>
    <input type="checkbox" v-model="isRead">
    <div>{{isRead}}</div>
    <input type="checkbox" value="足球" v-model="favorites">足球
    <input type="checkbox" value="篮球" v-model="favorites">篮球
    <input type="checkbox" value="乒乓球" v-model="favorites">乒乓球
    <br>
    <div>{{favorites}}</div>
    <hr>
    性别：<input type="radio" value="男" v-model="gender">男
        <input type="radio" value="女" v-model="gender">女
    <hr>
    学历
    <select v-model="edu">
        <option value="小学">小学</option>
        <option value="初中">初中</option>
        <option value="大学">大学</option>
    </select>
    {{edu}}
    <hr>
    <select v-model="fs" multiple>
        <option v-for="(f,index) in favorites" v-bind:key="index" v-bind:value="f">
            {{f}}
        </option>

    </select>
    <br>
    {{fs}}
    <input type="checkbox" true-value="yes" false-value="no" v-model="toggle">
    <div>{{toggle}}</div>
    <hr>
    <input type="text" v-model.lazy="message"><br>
    {{message}}<br>


</div>


</body>


<script>
        var app = new Vue({
        el: '#app',
            data: {
                message: "",
                textarea: '',
                isRead: true,
                favorites: [],
                gender: '男',
                edu: "",
                // fs: ['篮球','乒乓球','足球','排球','橄榄球']
                fs:[],
                toggle:''
            },

        methods:{

            submit() {
                alert("hhh")
            },
            increase(val) {
                this.counter=this.counter+2;
                this.val=val;
                console.log(val)

            }
        }
    })

</script>
</html>
